<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品一览</title>
    <th:block th:include="common.html :: source"></th:block>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
</head>
<style>
    body{
        margin: 20px;
    }
    .layui-table-cell{
        height:100px;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
    }
</style>
<body>
<div style="" class="panel-head layui-anim layui-anim-down"><strong> 商品信息</strong></div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/layui/layui.js" charset="UTF-8"></script>
<script th:inline="none">
    layui.use(['table', 'laypage', 'form'], function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/merchant/shoeInfo'
            , cellMinWidth: 80
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            , parseData: function (data) {
                return {
                    code: data.code,
                    msg: data.msg,
                    data: data.data,
                    count: data.count
                }
            }
            ,page: true
            , limit: 8
            , limits: [8, 16, 24, 32]
            ,title: '商品数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'shoeId', title:'商品编号', width:120, fixed: 'left', sort: true}
                ,{field:'shoeName', title:'商品名称', width:120}
                ,{field:'shoePrice', title:'价格', width:100,sort: true}
                ,{field:'shoeDescription', title:'标签', width:150}
                ,{field:'shoeStock', title:'库存', width:80}
                ,{field:'shoeIcon', title:'商品图片', width:160,  templet:'<div><img  src="{{ d.shoeIcon }}" width="120px" height="100px"></div>' }
                ,{field:'updateTime', title:'最近修改',align: 'center', width:120,  templet:'<div>{{ layui.util.toDateString(d.updateTime.date, \'yyyy-MM-dd\') }}</div>'}
                ,{field:'createTime', title:'创建时间',align: 'center', width:120,  templet:'<div>{{ layui.util.toDateString(d.createTime.date, \'yyyy-MM-dd\') }}</div>'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:170}
            ]]

        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'add':
                    layer.open({
                        type: 2
                        , title: "添加成员信息"
                        , area: ['45%', '78%']
                        , content: '/merchant/toSaveShoeInfo',
                        success: function (layero, index) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
                            //成员的职位回显
                            $.post({
                                url: "/merchant/shoeInfo",
                                success: function (resp) {
                                    iframeWin.layui.form.render("select");
                                }
                            })
                        }
                    });
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除么',
                    {
                        offset: '200px'
                    },
                    function(index){
                        $.post({
                            url: "/merchant/delShoeInfo",
                            data: {
                                "id": data.shoeId,
                            },
                            success: function (resp) {
                                if (resp === "true") {
                                    // obj.del();
                                    layer.close(index);
                                    location.reload();
                                } else {
                                    layer.close(index);
                                    layer.open({
                                        title: '温馨提示',
                                        content: '删除失败,请重试！'
                                    });
                                }
                            }
                        })
                    });
            } else if(obj.event === 'edit'){
                layer.open({
                    type: 2
                    , title: "修改信息"
                    , area: ['45%', '78%']
                    , content: '/merchant/toUpdateShoeInfo',
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
                        body.find('#shoeId').val(data.shoeId);
                        body.find('#shoeName').val(data.shoeName);
                        body.find('#shoePrice').val(data.shoePrice);
                        body.find('#shoeDescription').val(data.shoeDescription);
                        body.find('#shoeStock').val(data.shoeStock);
                        body.find('#shoeIcon').val(data.shoeIcon);
                        body.find('#categoryType').val(data.categoryType);
                        body.find('#createTime').val(data.createTime);
                        body.find('#updateTime').val(data.updateTime);
                        //成员的职位回显
                        $.post({
                            url: "/merchant/shoeInfo",
                            success: function (resp) {

                                iframeWin.layui.form.render("select");
                            }
                        })
                    }
                })
            }else if(obj.event === 'detail'){

                layer.open({
                    title: '信息',
                    area: ['30%', '70%'],
                    offset: 'auto',
                    content: 'ID: ' + data.shoeId + '</br>'
                        + '商品名称: ' + data.shoeName + '</br>'
                        + '价格: ' + data.shoePrice + '</br>'
                        + '标签: ' + data.shoeDescription + '</br>'
                        + '库存: ' + data.shoeStock + '</br>'
                        + '图片: ' + data.shoeIcon + '</br>'
                        + '商家类型: ' + data.categoryType + '</br>'
                        + '创建时间: ' + data.createTime + '</br>'
                        + '更新时间: ' + data.updateTime + '</br>'
                })
            }

        });
    });
</script>

</body>
</html>